import { Component, Inject, Input, Optional } from "@angular/core";
import { MonkFormDesignConfig, MONK_FORMDEISGN_CONFIG } from "../../monk-form-design.interface";

@Component({
  selector: 'app-design-form-properties',
  templateUrl: './design-form-properties.component.html',
  styleUrls: ['./design-form-properties.component.scss']
})
export class DesignFormPropertiesComponent {
  @Input() previewOptions //="record.key"
  @Input() config //="config"

  get simpleSize() {
    return this.globalConfig?.simpleSize;
  }
  constructor(
    @Optional() @Inject(MONK_FORMDEISGN_CONFIG) public globalConfig: MonkFormDesignConfig,
  ) {}

  handleChangeCol(e) {
    this.config.labelCol.xs = this.config.labelCol.sm = this.config.labelCol.md = this.config.labelCol.lg = this.config.labelCol.xl = this.config.labelCol.xxl = e;

    this.config.wrapperCol.xs = this.config.wrapperCol.sm = this.config.wrapperCol.md = this.config.wrapperCol.lg = this.config.wrapperCol.xl = this.config.wrapperCol.xxl =
      24 - e;
  }

  handleChangeLabelCol(e) {
    this.config.labelCol.xs = this.config.labelCol.sm = this.config.labelCol.md = this.config.labelCol.lg = this.config.labelCol.xl = this.config.labelCol.xxl = e;
  }
  handleChangeWrapperCol(e) {
    this.config.wrapperCol.xs = this.config.wrapperCol.sm = this.config.wrapperCol.md = this.config.wrapperCol.lg = this.config.wrapperCol.xl = this.config.wrapperCol.xxl = e;
  }
}